Akordioni vidinad: kokkupandav sisu parema ligipääsetavuse tagamiseks

HTML-struktuuri näide:

            
<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        1. jaotise pealkiri
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Sisu 1. jaotise jaoks läheb siia.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        2. jaotise pealkiri
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Sisu 2. jaotise jaoks läheb siia.</p>
    </div>
  </div>
</div>

            

              
                Copy
              
            
          

2. ARIA atribuudid dünaamilise sisu jaoks

ARIA rollid ja olekud on abistavatele tehnoloogiatele akordioni käitumisest teavitamiseks üliolulised.

• `role="button"`: Interaktiivsel elemendil (nupul), mis lülitab sisu.
• `aria-expanded`: Määratud `true`, kui sisupaneel on nähtav, ja `false`, kui see on peidetud. See edastab oleku otse ekraanilugeritele.
• `aria-controls`: Nupul, viidates selle sisupaneeli `id`-le, mida see kontrollib. See loob programmilise seose.
• `aria-labelledby`: Sisupaneelil, viidates selle nupu `id`-le, mis seda kontrollib. See loob kahesuunalise seose.
• `role="region"`: Sisupaneelil. See näitab, et sisu on tajutav osa lehest.
• `aria-hidden`: Kuigi `aria-expanded` on eelistatud nähtavuse olekute kontrollimiseks, saab `aria-hidden="true"` kasutada sisupaneelidel, mida hetkel ei kuvata, et vältida nende teatamist ekraanilugerite poolt. Siiski on robustsem tagada, et sisu on kas korralikult peidetud CSS-i (`display: none;`) kaudu või eemaldatud ligipääsetavuse puust.

Märkus `aria-hidden` vs. `display: none` kohta: `display: none;` kasutamine CSS-is eemaldab elemendi tõhusalt ligipääsetavuse puust. Kui näitate/peidate sisu dünaamiliselt JavaScripti abil ilma `display: none;` kasutamata, muutub `aria-hidden` olulisemaks. Siiski on `display: none;` üldiselt eelistatud meetod sisupaneelide peitmiseks.

3. Klaviatuuri toimivus

Tagage, et kasutajad saavad akordioniga suhelda standardsete klaviatuurikāskude abil.

• Tabeldusklahviga navigeerimine: Akordioni päised peavad olema fookustatavad ja ilmuma lehe loomulikus tabeldusjärjekorras.
• Aktiveerimine: `Enter` või `Spacebar` klahvi vajutamine fookuses oleval akordioni päisel peaks lülitama selle sisupaneeli nähtavust.
• Nooleklahvid (valikuline, kuid soovitatav): Parema kogemuse saamiseks kaaluge nooleklahvidega navigeerimise rakendamist:
  • `Nool alla`: Liiguta fookus järgmisele akordioni päisele.
  • `Nool üles`: Liiguta fookus eelmisele akordioni päisele.
  • `Home`: Liiguta fookus esimesele akordioni päisele.
  • `End`: Liiguta fookus viimasele akordioni päisele.
  • `Nool paremale` (või `Enter`/`Space`): Laienda/tõmba kokku praegune akordioni element.
  • `Nool vasakule` (või `Enter`/`Space`): Tõmba kokku praegune akordioni element ja liiguta fookus tagasi päisele.

4. Visuaalsed fookuse indikaatorid

Kui akordioni päis saab klaviatuuri fookuse, peab sellel olema selge visuaalne indikaator. Vaikimisi brauseri fookuse piirjooned on sageli piisavad, kuid veenduge, et neid ei eemaldataks CSS-iga (nt `outline: none;`) ilma alternatiivset, hästi nähtavat fookusstiili pakkumata.

CSS-i näide fookuse jaoks:

            
.accordion-button:focus {
  outline: 3px solid blue; /* Või värv, mis vastab kontrastsuse nõuetele */
  outline-offset: 2px;
}

            

              
                Copy
              
            
          

5. Sisu nähtavus ja esitlus

• Vaikimisi olek: Otsustage, kas akordioni jaotised peaksid olema vaikimisi kokku tõmmatud või laiendatud. KKK-de või tiheda teabe puhul on sageli parim alustada kokkutõmmatud olekus. Navigeerimise või funktsioonide kokkuvõtete puhul võib olla kasulik, kui üks jaotis on vaikimisi laiendatud.
• Visuaalsed vihjed: Kasutage selgeid visuaalseid vihjeid, et näidata, kas jaotis on laiendatud või kokku tõmmatud. See võib olla ikoon (nt '+' või '-' märk, üles/alla nool), mis muudab oma välimust. Veenduge, et need ikoonid oleksid ka ligipääsetavad (nt `aria-label` kaudu, kui neil pole teksti).
• Kontrastsuse suhted: Veenduge, et akordioni tekstisisu ja lülitusnupud vastavad WCAG kontrastsuse suhte nõuetele (4,5:1 tavalise teksti puhul, 3:1 suure teksti puhul). See on ülioluline vaegnägijatele.
• Sisu kadumise vältimine: Kui jaotis laieneb, veenduge, et selle sisu ei ulatuks oma konteinerist välja ega varjaks muud olulist sisu.

6. Fookuse haldamine lülitamisel

See on arenenum aspekt, kuid sujuva kogemuse jaoks ülioluline.

• Laiendamine: Kui kasutaja laiendab jaotist, kaaluge fookuse liigutamist esimesele interaktiivsele elemendile äsja ilmunud sisu sees. See on eriti oluline, kui laiendatud sisu sisaldab vormivälju või linke.
• Kokkutõmbamine: Kui kasutaja tõmbab jaotise kokku, peaks fookus naasma akordioni päisele, mida lülitati. See hoiab ära olukorra, kus kasutajad peavad navigeerima tagasi läbi varem kokku tõmmatud jaotiste.

Fookuse haldamise rakendamine hõlmab tavaliselt JavaScripti fookuse püüdmiseks ja programmiliselt seadmiseks.

Ligipääsetavate akordionite rakendamine JavaScriptiga

Kuigi semantiline HTML ja ARIA on esimesed sammud, on dünaamilise lülitamise ja potentsiaalselt fookuse haldamise jaoks sageli vaja JavaScripti. Siin on kontseptuaalne JavaScripti lähenemine:

            
// Akordioni funktsionaalsuse kontseptuaalne JavaScript

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // lülita aria-expanded olekut
      button.setAttribute('aria-expanded', !isExpanded);

      // lülita sisu nähtavust (kasutades CSS-i ligipääsetavuse jaoks)
      content.style.display = isExpanded ? 'none' : 'block'; // või kasuta klassi lülitit

      // Valikuline: fookuse haldamine laiendamisel
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Valikuline: siin rakendataks ka klaviatuuriga navigeerimist (nooleklahvid jne).
  // Näiteks 'keydown' sündmuste käsitlemine.
});

// Esialgne seadistus: peida sisu vaikimisi ja määra aria-expanded väärtuseks false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Peida sisu algselt
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

            

              
                Copy
              
            
          

Olulised kaalutlused JavaScripti jaoks:

• CSS peitmiseks: Sisu peitmiseks on parim praktika kasutada CSS-i (nt `display: none;` või klass, mis seab sujuvamate üleminekute jaoks `height: 0; overflow: hidden;`). See tagab, et sisu eemaldatakse ligipääsetavuse puust, kui see pole nähtav.
• Sujuv üleminek vanemale versioonile: Veenduge, et isegi kui JavaScript ei laadi või ei käivitu, jääb akordioni sisu ligipääsetavaks (kuigi võib-olla mitte kokkupandavaks). Semantiline HTML peaks siiski pakkuma mingit struktuuri.
• Raamistikud ja teegid: Kui kasutate JavaScripti raamistikke (React, Vue, Angular) või kasutajaliidese teeke, kontrollige nende ligipääsetavuse dokumentatsiooni. Paljud pakuvad ligipääsetavaid akordioni komponente otse karbist või spetsiifiliste atribuutidega.

Ligipääsetavuse testimine

Põhjalik testimine on ülioluline, et tagada teie akordioni vidinate tõeline ligipääsetavus.

• Automatiseeritud tööriistad: Kasutage brauserilaiendeid (nagu Axe, WAVE) või veebipõhiseid kontrollijaid tavaliste ligipääsetavusprobleemide tuvastamiseks.
• Klaviatuuriga testimine: Navigeerige ja kasutage akordioni ainult klaviatuuri abil (Tab, Shift+Tab, Enter, Spacebar, nooleklahvid). Veenduge, et kõik interaktiivsed elemendid on kättesaadavad ja toimivad.
• Ekraanilugeriga testimine: Testige populaarsete ekraanilugeritega (NVDA, JAWS, VoiceOver). Kuulake, kuidas akordioni struktuuri ja oleku muutusi teatatakse. Kas see on arusaadav? Kas `aria-expanded` olek edastatakse õigesti?
• Kasutajatega testimine: Võimalusel kaasake oma testimisprotsessi puuetega kasutajaid. Nende tagasiside on hindamatu reaalsete kasutusprobleemide tuvastamiseks.
• Brauseri ja seadme testimine: Testige erinevates brauserites ja seadmetes, kuna renderdamine ja JavaScripti käitumine võivad erineda.

Globaalsed perspektiivid ja lokaliseerimine

Globaalsele publikule disainimisel arvestage järgmiste teguritega:

• Keel: Veenduge, et kogu tekst, sealhulgas nupusildid ja sisu, on selge, lühike ja kergesti tõlgitav. Vältige idioome või kultuurispetsiifilisi viiteid.
• Sisu pikkus: Sisu laiendamine võib oluliselt mõjutada lehe paigutust. Pidage meeles, et tõlgitud sisu võib olla pikem või lühem kui originaal. Testige, kuidas teie akordion käsitleb erineva pikkusega sisu.
• Kultuurilised kasutajaliidese konventsioonid: Kuigi akordionite põhifunktsionaalsus on universaalne, võidakse peeneid disainielemente erinevates kultuurides erinevalt tajuda. Järgige väljakujunenud mustreid ja selgeid võimalusi.
• Jõudlus: Aeglasema internetiühendusega piirkondade kasutajate jaoks veenduge, et teie JavaScript on optimeeritud ja et akordionite sisu ei mõjuta liigselt lehe esialgset laadimisaega.

Ligipääsetavate akordionite näited

Paljud mainekad organisatsioonid demonstreerivad ligipääsetavaid akordioni mustreid:

• GOV.UK disainisüsteem: Sageli tsiteeritud oma pühendumuse eest ligipääsetavusele, pakub GOV.UK hästi dokumenteeritud komponente, sealhulgas akordioneid, mis vastavad WCAG-le.
• MDN Web Docs: Mozilla Developer Network pakub üksikasjalikke juhendeid ja näiteid ligipääsetavate vidinate, sealhulgas akordionite loomise kohta, selgete selgitustega ARIA kasutamise kohta.
• Suurte tehnoloogiaettevõtete disainisüsteemid: Ettevõtted nagu Google (Material Design), Microsoft (Fluent UI) ja Apple pakuvad disainisüsteemi komponente, mis seavad sageli esikohale ligipääsetavuse. Nendele viitamine võib pakkuda robustseid rakendusmustreid.

Kokkuvõte

Akordioni vidinad on võimsad tööriistad sisu organiseerimiseks ja kasutajakogemuse parandamiseks. Nende dünaamiline olemus nõuab aga kohusetundlikku lähenemist ligipääsetavusele. Järgides WCAG juhiseid, kasutades semantilist HTML-i, rakendades ARIA-t korrektselt, tagades robustse klaviatuuriga navigeerimise ja viies läbi põhjaliku testimise, saate luua akordioni komponente, mis on kasutatavad ja nauditavad kõigile üle maailma. Ligipääsetavuse seadmine esikohale algusest peale ei taga mitte ainult vastavust, vaid viib ka kaasavama ja kasutajasõbralikuma tooteni kõigi jaoks.

Pidage meeles, et ligipääsetav disain ei ole järelmõte; see on hea disaini lahutamatu osa. Ligipääsetavate akordioni vidinate rakendamise meisterlikkusega aitate kaasa õiglasema ja kasutatavama veebi loomisele kõigi kasutajate jaoks.